<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="email=no"/>
    <title>我的动态</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/vant.css">
    <link rel="stylesheet" href="../../css/main.css">
    <style>

        .dynamic .dynamic-f3 .videoStyle{
            width: 1rem;
            height: 1rem;
        }
        .dynamic .dynamic-f3 .doubleImg{
            width: 2rem;
            height: 2rem;
        }
        .van-field__body textarea {
            width: 3.51rem;
            height: 1.36rem !important;
            border: .01rem solid #EBEBEB;
            border-radius: .05rem;
            padding: .1rem .08rem;
        }
        .video_box{
            position: relative;
            margin-right: .1rem;
            margin-bottom: .1rem;
        }

        .video_box .playIcon {
            color: #3F8CEC;
            font-size: .5rem;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        .bp-x{
            display: none !important;
        }

        .bp_container{
            background: black !important;
            opacity: 100% !important;
        }

    </style>
</head>
<body>
<div class="app" v-cloak>
    <div class="dynamic" v-for="(moment, index) in listMoments" :key="index" @click="goPage(moment, index)">
        <div class="dynamic-f1 flex-x-sb">
            <div class="info avatar flex-x-s">
                <img :src="moment.headImg?moment.headImg:'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/circle/man-avatar.png'" alt="">
                <div class="name">
                    <div>{{moment.nickName}}</div>
                    <div class="datetime">{{moment.publishTime}}</div>
                </div>
            </div>
            <div class="cancel" @click.stop="deleteTopic(moment)">
                <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/mine/cancel.png" alt="">
            </div>
        </div>
        <div class="dynamic-f2">
            {{moment.content}}
        </div>
        <div class="dynamic-f3">
            <div v-for="(it,idx) in moment.medias" :key="idx" class="flex-x-s">
                <div class="video_box videoStyle" v-if="it.mediaType === '0'"
                     :class="{doubleImg:moment.medias && moment.medias.length===1}">
                    <img
                        :class="{doubleImg:moment.medias && moment.medias.length===1}"
                        :src="it.imagePath" alt="" @click.stop="preview(idx,moment.medias)"
                    >
                </div>
                <div v-if="it.mediaType === '1'" class="video_box videoStyle" :id="'imagePath'+index"
                     :class="{doubleImg:moment.medias && moment.medias.length===1}"
                     @click.stop="videoPreview(it, index, it.imagePath)">
                    <img
                        :class="{doubleImg:moment.medias && moment.medias.length===1}"
                        :src="it.imagePath || 'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/circle/loading2.png'" alt=""
                    >
                    <span v-if="it.imagePath" class="playIcon iconfont">
                        <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/playV.png" alt="" style="width: .5rem; height: .5rem;">
                    </span>
                </div>
            </div>
        </div>
        <div class="dynamic-f5 flex-x-s">
            <div class="comment flex-x-s">
                <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/comment.png" alt="">
                <span>{{moment.commentNumber == 0 ? '评论' : moment.commentNumber}}</span>
            </div>
            <div class="flex-x-s thumb" @click.stop="doThumb(moment)">
                <img :src="moment.likeFlag?'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/thumb_active.png' : 'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/thumb_no.png'" alt="">
                <span>{{moment.likeNumber == '0' ? '点赞' : moment.likeNumber}}</span>
            </div>
        </div>
    </div>
    <div class="collect-empty" v-if="listMoments&&listMoments.length==0">
        <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/empty/empty.png" alt="">
        <div>暂无内容～</div>
    </div>
    <van-image-preview v-model="showImages" :images="imageList" :start-position="imageIndex"></van-image-preview>
</div>
<script src="../../script/api.js"></script>
<script src="../../script/flexible.js"></script>
<script src="../../script/fastclick.js"></script>
<script src="../../script/vue.min.js"></script>
<script src="../../script/iconfont.js"></script>
<script src="../../script/vant.min.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/restful.js"></script>
<script src="../../script/businessCommon.js"></script>
<script src="../../script/BigPicture.js"></script>
<script>
    apiready = function () {
// 下拉刷新
        api.setRefreshHeaderInfo({
            bgColor: '#f7f7f7',
            textDown: '下拉更新有惊喜',
            textUp: '松开可以刷新'
        }, function (ret, err) {
            vm.listAllMimeMoments();
            api.refreshHeaderLoadDone()
        });
        // 上拉加载
        api.addEventListener({
            name: 'scrolltobottom',
            extra: {
                threshold: -10
            }
        }, function (ret, err) {
            if (vm.hasNext) {
                vm.queryParam.pageNum++
                vm.listAllMimeMoments();
            }
        });
        vm = new Vue({
            el: '.app',
            data: {
                imageIndex: 1,
                showImages: false,
                imageList: [],
                listMoments: [],
                hasNext: false,
                queryParam: {pageNum: 1, pageSize: 10}
            },
            mounted: function () {
                this.listMoments = []
                this.listAllMimeMoments()
            },
            methods: {

                preview(index,medias){
                    var photoBrowser = api.require('photoBrowser');
                    previewPhoto(index,medias,photoBrowser)
                },

                // 获取我的所有动态
                listAllMimeMoments: function () {
                    let vm = this
                    circle("listAllMimeMoments")(vm.queryParam, function (ret) {
                        console.log('动态：',JSON.stringify(ret));
                        vm.hasNext = ret.data.hasNext
                        if (vm.queryParam.pageNum === 1) {
                            vm.listMoments = ret.data.list
                        } else {
                            vm.listMoments = vm.listMoments.concat(ret.data.list)
                        }
                    })
                },
                previewImg: function (idx, item) {
                    let vm = this
                    vm.imageIndex = idx
                    vm.imageList = []
                    item.forEach(it => {
                        vm.imageList.push(it.imagePath)
                    })
                    vm.showImages = true
                },

                /**
                 * 视频预览
                 * @param item
                 * @param index
                 */
                 videoPreview: function (item, index) {
                    let _this = this
                    if (!item.videoPath){
                        common("getVideoPlay")(item.videoId, function (ret) {
                            let videoData = ret.data
                            if (videoData && videoData.playInfoList.length > 0){
                                let playUrl = videoData.playInfoList[0].playURL
                                api.openVideo({
                                    url: playUrl
                                });
                            }else {
                                // toastMiddle('视频转码中！')
                                return false
                            }
                        })
                    }else {
                        api.openVideo({
                            url: item.videoPath
                        });
                    }
                },


                doThumb(item) {
                    var vm = this;
                    circle("doThumb")(item, function(ret) {
                        item.likeFlag = !item.likeFlag;

                        console.log(item.likeFlag)

                        if (item.likeFlag === true) {
                            item.likeNumber += 1;
                            toastMiddle('点赞成功')
                        } else {
                            item.likeNumber -= 1;
                            toastMiddle('取消点赞')

                        }
                    })
                },
                deleteTopic: function (topic) {
                    let vm = this
                    api.confirm({
                        title: '是否删除这条动态？',
                        buttons: ['确定', '取消']
                    }, function (ret, err) {
                        if (ret.buttonIndex === 1) {
                            circle("deleteMoment")(topic.topicId, function (ret) {
                                setTimeout(() => toastBottom("删除成功"), 250)
                                setTimeout(() => {
                                    vm.queryParam.pageNum = 1
                                    vm.listAllMimeMoments()
                                }, 500)
                            })
                        }
                    });
                },
                back() {
                    api.closeWin();
                },
                goPage(item) {
                    api.openWin({
                        name: 'circle_detail_win',
                        url: '../circle/circle_detail_win.html',
                        bounces: false,
                        pageParam: {
                            topicId: item.topicId,

                        }
                    });
                }
            },
        })
        api.addEventListener({
            name: 'updateLikeOrComments'
        }, function(ret, err){
            for (let i = 0; i < vm.listMoments.length; i++) {
                if (vm.listMoments[i].topicId == ret.value.topicId ){
                    vm.listMoments[i].commentNumber = ret.value.commentNumber
                    vm.listMoments[i].likeNumber = ret.value.likeNumber
                    vm.listMoments[i].likeFlag = ret.value.likeFlag
                    break
                }
            }
        });

        api.addEventListener({
            name: 'eventCircleClosePhoto'
        }, function(ret, err){
            if (document.getElementById("bp_container")) {
                vm.viodePreview.close()
            }
            photoBrowser.close();
        });

    }
</script>
</body>
</html>
